{% extends "pages-base.html" %}
{% block content %}
<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">用户组</h3>
    </div>

    <!--Data Table-->
    <!--===================================================-->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel-body">
                <div class="pad-btm form-inline">
                    <div class="row">
                        <div class="col-sm-6 table-toolbar-left" id="pages-groups-addGroup">
                            <button  class="btn btn-purple" data-toggle="modal"
                                    data-target="#pages-groups-addgroup-Modal"><i class="demo-pli-add"></i> 添加
                            </button>
                        </div>
                    </div>
                </div>

                <div class="table-responsive" id="pages-groups-table-list">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th class="text-center">组名</th>
                                <th>用户数</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for g in allgroups %}
                            <!--将id作为标识-->
                            <tr flag={{ g.gid }}>
                                <td>{{ g.userGroupName }}</td>
                                <td>{{ g.usersNum }}</td>
                                <td>{{ g.userGroupDes }}</td>
                               <!-- <td>{{ g.gid }}</td>-->
                                <td>
                                    <button type="button" class="btn btn-info pages-groups-edit-group" data-toggle="modal"
                                            data-target="#pages-groups-editgroup-Modal">编辑
                                    </button>
                                    <button type="button" class="btn btn-danger pages-groups-del-group" >删除</button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!--===================================================-->
    <!--End Data Table-->

    <!--add  group form-->
    <!--===================================================-->
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4">
            <!-- Modal -->
            <div class="modal fade" id="pages-groups-addgroup-Modal" tabindex="-1" role="dialog" aria-labelledby="pages-groups-addgroup-ModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <!--      <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                              </div>-->
                        <div class="modal-body">
                            <div class="panel">
                                <div class="panel-heading">
                                    <h3 class="panel-title">创建用户组</h3>
                                </div>

                                <!-- BASIC FORM ELEMENTS -->
                                <!--===================================================-->
                                <form class="panel-body form-horizontal form-padding">
                                    <!--Text Input-->
                                    <div class="form-group">
                                        <label class="col-md-3 control-label" for="pages-groups-groupname">组名</label>
                                        <div class="col-md-9" id="pages-groups-groupname-input">
                                            <input type="text" id="pages-groups-groupname" class="form-control"
                                                   placeholder="groupname">
                                            <small class="help-block">请输入组名</small>
                                        </div>
                                    </div>
                                    <!--Textarea-->
                                    <div class="form-group">
                                        <label class="col-md-3 control-label" for="pages-groups-groupdesc">描述</label>
                                        <div class="col-md-9" id="pages-groups-groupdesc-input">
                            <textarea id="pages-groups-groupdesc" rows="9" class="form-control"
                                      placeholder="Your group description here.."></textarea>
                                        </div>
                                    </div>

                                </form>
                                <!--===================================================-->
                                <!-- END BASIC FORM ELEMENTS -->
                            </div>
                        </div>
                        <div class="modal-footer" id="pages-groups-addgroup-btn">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary">添加</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-lg-4"></div>
    </div>
    <!--===================================================-->
    <!--================================================-->
    <!--edit group form -->
    <form class="form-horizontal" role="form" id="pages-groups-edit-form" style="margin: 20px;">
    <div class="modal fade" id="pages-groups-editgroup-Modal" tabindex="-1" role="dialog" aria-labelledby="pages-groups-editgroup-ModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        编辑用户组
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="pages-groups-edit-groupname" class="col-sm-3 control-label">组名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="pages-groups-edit-groupname" name="user_id" placeholder="Groupname">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="pages-groups-edit-groupdesc" class="col-sm-3 control-label">备注</label>
                            <div class="col-sm-9">
                                <textarea  class="form-control"  name="remark" id="pages-groups-edit-groupdesc"
                                       placeholder="备注">
                                </textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer pages-groups-edit-submit">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary">
                        提交
                    </button><span id="tip"> </span>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    </form>
    <!--===================================================-->



</div>
{% endblock %}


{% block js %}
<script src="/static/js/pages-groups-service.js"></script>
{% endblock %}
